import { useTheme } from '../context/ThemeContext';

interface TabOption {
    key: string;
    label: string;
    count?: number;
}

interface TabButtonsProps {
    options: TabOption[];
    activeTab: string;
    onChange: (key: string) => void;
}

const TabButtons: React.FC<TabButtonsProps> = ({
    options,
    activeTab,
    onChange
}) => {
    const { theme } = useTheme();

    return (
        <div style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
            {options.map(option => (
                <button
                    key={option.key}
                    onClick={() => onChange(option.key)}
                    style={{
                        flex: 1,
                        padding: '10px',
                        backgroundColor: activeTab === option.key
                            ? (theme === 'light' ? '#007bff' : '#0056b3')
                            : (theme === 'light' ? '#e9ecef' : '#6c757d'),
                        color: activeTab === option.key ? 'white' : (theme === 'light' ? '#000' : '#fff'),
                        border: 'none',
                        borderRadius: '4px',
                        cursor: 'pointer'
                    }}
                >
                    {option.label} {typeof option.count === 'number' && `(${option.count})`}
                </button>
            ))}
        </div>
    );
};

export default TabButtons; 